<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>播放器 - 深度对话</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css">
  <link rel="stylesheet" href="styles.css">
  <style>
    .blur-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      background-position: center;
      filter: blur(30px);
      opacity: 0.3;
      z-index: -1;
    }
    
    .waveform {
      height: 50px;
      width: 100%;
      position: relative;
      margin: 20px 0;
    }
    
    .waveform-bg {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    
    .waveform-path {
      height: 100%;
      display: flex;
      align-items: center;
    }
    
    .wave-bar {
      width: 3px;
      height: 20px;
      margin: 0 1px;
      background-color: rgba(79, 70, 229, 0.2);
      border-radius: 1px;
    }
    
    .wave-bar.active {
      background-color: rgba(79, 70, 229, 1);
    }
    
    .player-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: #e5e7eb;
      outline: none;
      transition: all 0.2s;
    }
    
    .player-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #4f46e5;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .player-slider::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #4f46e5;
      cursor: pointer;
      border: none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .player-slider::-webkit-slider-runnable-track {
      background: linear-gradient(to right, #4f46e5 0%, #4f46e5 58%, #e5e7eb 58%, #e5e7eb 100%);
      height: 4px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <div class="app-container h-full bg-gray-50">
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
      <div class="status-left">
        <span class="status-time">00:00</span>
      </div>
      <div class="status-right">
        <i class="ri-signal-wifi-fill"></i>
        <i class="ri-battery-fill"></i>
      </div>
    </div>
    
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
      <!-- 头部导航 -->
      <div class="flex items-center justify-between px-4 py-3">
        <button class="w-8 h-8 flex items-center justify-center rounded-full bg-white shadow-sm click-target" aria-label="返回" onclick="history.back()">
          <i class="ri-arrow-down-s-line text-xl"></i>
        </button>
        <div class="flex flex-col items-center">
          <span class="text-xs text-gray-500">正在播放</span>
          <span class="text-sm font-medium">深度对话</span>
        </div>
        <button class="w-8 h-8 flex items-center justify-center rounded-full bg-white shadow-sm click-target" aria-label="选项">
          <i class="ri-more-2-fill"></i>
        </button>
      </div>
      
      <!-- 播放内容 -->
      <div class="flex-1 flex flex-col items-center justify-between px-8 py-6 relative">
        <!-- 背景模糊效果 -->
        <div class="blur-bg" style="background-image: url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3');"></div>
        
        <!-- 封面与信息 -->
        <div class="flex flex-col items-center mt-6">
          <div class="relative">
            <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="AI如何重塑行业未来？" class="w-60 h-60 rounded-2xl shadow-xl object-cover">
            <div class="absolute -right-3 -bottom-3 bg-white rounded-full p-1 shadow-lg">
              <button class="w-10 h-10 flex items-center justify-center rounded-full bg-indigo-600 text-white click-target" aria-label="收藏">
                <i class="ri-heart-line text-lg"></i>
              </button>
            </div>
          </div>
          
          <h1 class="text-xl font-bold text-center mt-8 text-gray-900">「人工智能」AI如何重塑行业未来？</h1>
          <p class="text-sm text-gray-600 text-center mt-2">深度对话 · 李明</p>
        </div>
        
        <!-- 波形图和进度 -->
        <div class="w-full">
          <!-- 波形可视化（模拟） -->
          <div class="waveform" aria-hidden="true">
            <div class="waveform-bg">
              <div class="waveform-path">
                <!-- 生成一组随机高度的波形柱 -->
                <div class="wave-bar active" style="height: 50%;"></div>
                <div class="wave-bar active" style="height: 30%;"></div>
                <div class="wave-bar active" style="height: 70%;"></div>
                <div class="wave-bar active" style="height: 40%;"></div>
                <div class="wave-bar active" style="height: 60%;"></div>
                <div class="wave-bar active" style="height: 80%;"></div>
                <div class="wave-bar active" style="height: 50%;"></div>
                <div class="wave-bar active" style="height: 90%;"></div>
                <div class="wave-bar active" style="height: 40%;"></div>
                <div class="wave-bar active" style="height: 60%;"></div>
                <div class="wave-bar active" style="height: 30%;"></div>
                <div class="wave-bar active" style="height: 75%;"></div>
                <div class="wave-bar active" style="height: 65%;"></div>
                <div class="wave-bar active" style="height: 40%;"></div>
                <div class="wave-bar active" style="height: 85%;"></div>
                <div class="wave-bar active" style="height: 25%;"></div>
                <div class="wave-bar active" style="height: 45%;"></div>
                <div class="wave-bar active" style="height: 65%;"></div>
                <div class="wave-bar active" style="height: 35%;"></div>
                <div class="wave-bar active" style="height: 50%;"></div>
                <div class="wave-bar active" style="height: 70%;"></div>
                <div class="wave-bar active" style="height: 45%;"></div>
                <div class="wave-bar active" style="height: 55%;"></div>
                <div class="wave-bar active" style="height: 35%;"></div>
                <div class="wave-bar active" style="height: 65%;"></div>
                <div class="wave-bar active" style="height: 40%;"></div>
                <div class="wave-bar active" style="height: 30%;"></div>
                <div class="wave-bar active" style="height: 80%;"></div>
                <div class="wave-bar active" style="height: 60%;"></div>
                <div class="wave-bar active" style="height: 40%;"></div>
                <div class="wave-bar active" style="height: 70%;"></div>
                <div class="wave-bar active" style="height: 30%;"></div>
                <!-- 后面的波形尚未播放到 -->
                <div class="wave-bar" style="height: 55%;"></div>
                <div class="wave-bar" style="height: 30%;"></div>
                <div class="wave-bar" style="height: 70%;"></div>
                <div class="wave-bar" style="height: 40%;"></div>
                <div class="wave-bar" style="height: 60%;"></div>
                <div class="wave-bar" style="height: 20%;"></div>
                <div class="wave-bar" style="height: 50%;"></div>
                <div class="wave-bar" style="height: 30%;"></div>
                <div class="wave-bar" style="height: 80%;"></div>
                <div class="wave-bar" style="height: 25%;"></div>
                <div class="wave-bar" style="height: 45%;"></div>
                <div class="wave-bar" style="height: 65%;"></div>
                <div class="wave-bar" style="height: 35%;"></div>
                <div class="wave-bar" style="height: 50%;"></div>
                <div class="wave-bar" style="height: 70%;"></div>
                <div class="wave-bar" style="height: 45%;"></div>
                <div class="wave-bar" style="height: 55%;"></div>
                <div class="wave-bar" style="height: 35%;"></div>
                <div class="wave-bar" style="height: 65%;"></div>
                <div class="wave-bar" style="height: 40%;"></div>
                <div class="wave-bar" style="height: 30%;"></div>
                <div class="wave-bar" style="height: 80%;"></div>
                <div class="wave-bar" style="height: 60%;"></div>
                <div class="wave-bar" style="height: 40%;"></div>
                <div class="wave-bar" style="height: 70%;"></div>
                <div class="wave-bar" style="height: 30%;"></div>
                <div class="wave-bar" style="height: 55%;"></div>
                <div class="wave-bar" style="height: 35%;"></div>
                <div class="wave-bar" style="height: 65%;"></div>
                <div class="wave-bar" style="height: 40%;"></div>
                <div class="wave-bar" style="height: 75%;"></div>
                <div class="wave-bar" style="height: 50%;"></div>
                <div class="wave-bar" style="height: 35%;"></div>
                <div class="wave-bar" style="height: 60%;"></div>
                <div class="wave-bar" style="height: 30%;"></div>
                <div class="wave-bar" style="height: 70%;"></div>
                <div class="wave-bar" style="height: 45%;"></div>
                <div class="wave-bar" style="height: 55%;"></div>
                <div class="wave-bar" style="height: 40%;"></div>
                <div class="wave-bar" style="height: 35%;"></div>
                <div class="wave-bar" style="height: 65%;"></div>
                <div class="wave-bar" style="height: 50%;"></div>
                <div class="wave-bar" style="height: 30%;"></div>
                <div class="wave-bar" style="height: 60%;"></div>
                <div class="wave-bar" style="height: 40%;"></div>
                <div class="wave-bar" style="height: 70%;"></div>
              </div>
            </div>
          </div>
          
          <!-- 进度滑块 -->
          <input type="range" class="player-slider" min="0" max="100" value="58" aria-label="播放进度">
          
          <!-- 时间显示 -->
          <div class="flex justify-between text-xs text-gray-500 mt-2">
            <span>32:36</span>
            <span>56:12</span>
          </div>
          
          <!-- 播放控制 -->
          <div class="flex items-center justify-between mt-8">
            <button class="w-10 h-10 flex items-center justify-center text-gray-600 click-target" aria-label="倒退15秒">
              <i class="ri-rewind-mini-fill text-xl"></i>
            </button>
            <button class="w-10 h-10 flex items-center justify-center text-gray-600 click-target" aria-label="上一集">
              <i class="ri-skip-back-fill text-xl"></i>
            </button>
            <button class="w-16 h-16 flex items-center justify-center bg-indigo-600 text-white rounded-full shadow-lg click-target" aria-label="暂停">
              <i class="ri-pause-fill text-3xl"></i>
            </button>
            <button class="w-10 h-10 flex items-center justify-center text-gray-600 click-target" aria-label="下一集">
              <i class="ri-skip-forward-fill text-xl"></i>
            </button>
            <button class="w-10 h-10 flex items-center justify-center text-gray-600 click-target" aria-label="快进15秒">
              <i class="ri-speed-mini-fill text-xl"></i>
            </button>
          </div>
          
          <!-- 播放设置 -->
          <div class="flex items-center justify-between mt-8">
            <button class="click-target flex flex-col items-center" aria-label="设置播放速度">
              <i class="ri-speed-line text-gray-600 text-lg"></i>
              <span class="text-xs text-gray-600 mt-1">1.0x</span>
            </button>
            <button class="click-target flex flex-col items-center" aria-label="定时关闭">
              <i class="ri-timer-line text-gray-600 text-lg"></i>
              <span class="text-xs text-gray-600 mt-1">定时</span>
            </button>
            <button class="click-target flex flex-col items-center" aria-label="查看剧集信息">
              <i class="ri-file-list-line text-gray-600 text-lg"></i>
              <span class="text-xs text-gray-600 mt-1">剧集</span>
            </button>
            <button class="click-target flex flex-col items-center" aria-label="分享">
              <i class="ri-share-line text-gray-600 text-lg"></i>
              <span class="text-xs text-gray-600 mt-1">分享</span>
            </button>
            <button class="click-target flex flex-col items-center" aria-label="更多选项">
              <i class="ri-more-2-line text-gray-600 text-lg"></i>
              <span class="text-xs text-gray-600 mt-1">更多</span>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 内容介绍 -->
      <div class="bg-white rounded-t-3xl px-6 py-5 shadow-lg">
        <h2 class="text-lg font-semibold text-gray-900">剧集简介</h2>
        <p class="text-sm text-gray-600 leading-relaxed mt-2">
          本期节目邀请多位行业专家共同探讨人工智能技术如何影响各行各业的发展前景，以及我们应该如何应对AI带来的变革。我们将深入讨论AI在医疗、金融、教育等领域的应用，以及技术革新带来的伦理问题和社会责任。
        </p>
        <div class="flex flex-wrap gap-2 mt-4">
          <span class="text-xs px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full">人工智能</span>
          <span class="text-xs px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full">科技革新</span>
          <span class="text-xs px-3 py-1 bg-indigo-50 text-indigo-700 rounded-full">未来展望</span>
        </div>
      </div>
    </div>
  </div>
  
  <script src="components.js"></script>
</body>
</html> 
